<template>
    <div>
        <div class="box">
            <div style=" width: 95%; margin: 20px auto;">
                <div>
                    <div>
                        <el-form v-show="active == 1" ref="form" v-model="saveReservoirDTO.name" label-width="80px">
                            <el-form-item label="水库名称">
                                <el-input v-model="saveReservoirDTO.name" style="width: 240px; ">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="水库地址">
                                <div class="flex23">
                                    <el-select style="width: 240px;" v-model="saveReservoirDTO.cityCode"
                                        placeholder="全部" @change="statusChange(saveReservoirDTO.cityCode)">
                                        <el-option v-for="item in cityInfo" :key="item.id" :label="item.cityName"
                                            :value="item.cityCode">
                                        </el-option>
                                    </el-select>
                                    <el-form-item label="经度" >
                                        <el-input v-model="saveReservoirDTO.longitude" style="width: 240px;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="纬度">
                                        <el-input v-model="saveReservoirDTO.latitude" style="width: 240px;"></el-input>
                                    </el-form-item>

                                </div>
                            </el-form-item>
                            <el-form-item class="flex1" label="详细地址">
                                <el-input v-model="saveReservoirDTO.addressDetail" style="width: 240px;"></el-input>
                            </el-form-item>
                            <el-form-item label="渔方数量">
                                <el-input v-model="saveReservoirDTO.fishPartyTotalNum" style="width: 240px;"></el-input>
                            </el-form-item>
                            <div class="flex23">
                                <el-form-item label="水库负责人">
                                    <el-input v-model="saveReservoirDTO.chargeName" style="width: 240px;"></el-input>

                                </el-form-item>
                                <el-form-item label="手机号" style="margin-left: 14px;">
                                    <el-input v-model="saveReservoirDTO.chargePhone" style="width: 240px;"></el-input>

                                </el-form-item>



                            </div>


                            <el-form-item label="水库图片">
                                <div>
                                    <div>
                                        水库图片
                                    </div>
                                    <el-form>
                                        <el-form-item prop="file">
                                            <el-upload class="upload-demo" ref="upload" multiple action=""
                                                :http-request="httpRequest" :auto-upload="false"
                                                :before-upload="beforeAvatarUpload" :on-remove="handleRemove"
                                                :on-preview="handlePictureCardPreview">
                                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                <el-button style="margin-left:5px" size="small" type="primary"
                                                    @click="submitUploadList">上传
                                                </el-button>
                                            </el-upload>
                                            <el-dialog :visible.sync="dialogVisible">
                                                <img style="width: 200px; height: 200px;" :src="saveReservoirDTO.img" alt="">
                                            </el-dialog>
                                        </el-form-item>
                                    </el-form>
                                    <div v-if="saveReservoirDTO.img">
                                        <img width="200px" height="200px" :src="saveReservoirDTO.img" alt="">
                                    </div>
                                </div>
                            </el-form-item>

                            <el-form-item label="状态">
                                <el-radio v-model="saveReservoirDTO.enableStatus" :label="0">开启</el-radio>
                                <el-radio v-model="saveReservoirDTO.enableStatus" :label="1">关闭</el-radio>
                            </el-form-item>
                        </el-form>

                        <div style="margin: 20px auto; width: 95%;">


                            <div v-show="active == 2" style="margin:0 auto;">
                                <div>
                                    <div class="hang" v-for=" ( item, index)  in saveReservoirDTO.reservoirFtyList" :key="item.id">
                                        <span style="width: 60px; margin:0 20px;;">
                                            鱼苗{{ index + 1 | myNum }}:

                                        </span>

                                        <el-select v-model="item.fryId" placeholder="请选择">
                                            <el-option v-for="item in options" :key="item.id" :label="item.name"
                                                :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <div class="ratio">
                                            <span style="width: 100px; margin:0 20px;">随机比例:</span>
                                            <el-input v-model="item.scale"></el-input>
                                        </div>
                                        <div @click="dele(index)" style="margin-left: 10px; color: red;">
                                            删除
                                        </div>
                                    </div>
                                    <div style="text-align: center; margin-top: 20px;">
                                        <el-button @click="add" type="primary" icon="el-icon-plus"></el-button>
                                    </div>
                                </div>
                            </div>
                            <div class="button-box">
                                <el-button @click="toadd" v-show="active == 1" type="primary">下一步编辑鱼苗</el-button>
                                <el-button v-show="active == 2" @click="active = 1" type="primary">上一步,编辑水库资料
                                </el-button>
                                <el-button v-show="active == 2" @click="ok" type="primary">完成提交</el-button>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script>
import { queryList, uploadFileToOss, addSave, fryInfoList ,detail} from '@/api/user'
import { Toast } from 'vant';
export default {
    name:'addReservoir',
    data() {
        return {
            cityCode: '', //城市
            cityInfo: [],
            arr: ["一", "二", "三", "四", "五", "六", "七"],
            options: [
            ],
            value: "",
            active: 1,
            dialogVisible: false,
            dialogImageUrl: "",
            dialogImageUrl: "",
            saveReservoirDTO: {
                addressDetail: "",
                chargeName: "",
                chargePhone: "",
                cityCode: "",
                enableStatus: '0',
                fishPartyTotalNum: '',
                id: '',
                img: "",
                latitude: "",
                longitude: "",
                name: "",
                reservoirFtyList: [
                    {
                        fryId: '',
                        reservoirId: '',
                        scale: ''
                    },
                    {
                        fryId: '',
                        reservoirId: '',
                        scale: ''
                    }
                ]
            }
        }
    },
    created() {
        this.reservoirId = this.$route.query.querId
        this.detail()
        this.queryList()
        this.fryInfoList()
    },

    methods: {
        // 分页列表
        async fryInfoList() {
            let result = await fryInfoList()
            if(result.code==0){
                this.options = result.data
            }
        },
        async httpRequest(param) {
            let fileObj = param.file; // 相当于input里取得的files
            let formData = new FormData(); // FormData 对象
            formData.append("file", fileObj); // 文件对象
            let result = await uploadFileToOss(formData)
            if (result.code == 0) {
                this.dialogImageUrl = result.data
                this.saveReservoirDTO.img = result.data
            }
        },
        submitUploadList() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            this.dialogImageUrl = ''
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.name;
            this.dialogVisible = true;
        },
        // 限制图片大小
        beforeAvatarUpload(file) {
            const isJPEG = file.type === 'image/jpeg';
            const isJPG = file.type === 'image/jpg';
            const isPNG = file.type === 'image/png';
            const isLt500Kb = file.size / 1024 < 500;
            if (!isJPEG && !isJPG && !isPNG) {
                this.$message.error('上传文件只能是图片格式!');
            }
            if (!isLt500Kb) {
                this.$message.error('上传鱼米图片大小不能超过500KB!');
            }
            return (isJPEG || isJPG || isPNG) && isLt500Kb;
        },
           // 水库详情
           async detail() {
            let data = {
                reservoirId: this.reservoirId
            }
            let result = await detail(data)
            if (result.code == 0) {
                this.saveReservoirDTO.reservoirFtyList = result.data.fryList
                this.saveReservoirDTO.addressDetail=result.data.reservoir.addressDetail
                this.saveReservoirDTO.chargeName= result.data.reservoir.chargeName
                this.saveReservoirDTO.chargePhone= result.data.reservoir.chargePhone
                this.saveReservoirDTO.cityCode=result.data.reservoir.cityCode
                this.saveReservoirDTO.enableStatus=result.data.reservoir.enableStatus
                this.saveReservoirDTO.fishPartyTotalNum=result.data.reservoir.fishPartyTotalNum
                this.saveReservoirDTO.id=result.data.reservoir.id
                this.saveReservoirDTO.img=result.data.reservoir.img
                this.saveReservoirDTO.latitude= result.data.reservoir.latitude
                this.saveReservoirDTO.longitude=result.data.reservoir.longitude
                this.saveReservoirDTO.name=result.data.reservoir.name
            }
        },
        // 城市列表接口
        async queryList() {
            let result = await queryList()
            if (result.code == 0) {
                this.cityInfo = result.data
            }

        },
        // 城市地址
        statusChange(e) {
            this.saveReservoirDTO.cityCode = e
        },
        // 点击下一项
        toadd() {
            if (this.active == 1) {
                this.active = 2
            }
        },
        // 删除
        dele(i) {
            this.saveReservoirDTO.reservoirFtyList.splice(i, 1)
        },
        // 添加
        add() {
            this.saveReservoirDTO.reservoirFtyList.push({

                "fryId": '',
                "reservoirId": '',
                "scale": ''

            })
        },
        async ok() {
            //   发送请求 把 saveReservoirDTO 带过去
            let data = this.saveReservoirDTO
            let result = await addSave(data)
            if (result.code == 0) {
                Toast.success('编辑水库成功')
                setTimeout(() => {
                    this.$router.push('/reservoir/reservoir/reservoir')
                }, 200);
            }else{
                Toast.fail('编辑水库失败,请稍后再试')
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.box {
    border: 1px solid #ccc;
    width: 98%;
    margin: 10px auto;
}

.flexcenter {
    display: flex;
    justify-content: center;

    div {
        margin-top: 20px;
        flex: 1;
    }
}

.flex23 {
    display: flex;
    flex-flow: wrap;
}

.flex1 {
    flex: 1;
    margin-top: 20px;
}


.button-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
::v-deep .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 10px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.hang {
    display: flex;
    align-items: center;
  justify-content: center;
}

.ratio {
    display: flex;
    align-items: center;
}
</style>